{% extends 'base.html' %}
{% load static %}

{% block title %}故事列表 - AI故事生成系统{% endblock %}

{% block content %}
<div class="container mt-4">
    <h1 class="text-center mb-4">故事列表</h1>
    
    <!-- 分类导航和搜索栏 -->
    <div class="row mb-4">
        <div class="col-md-8">
            <div class="category-nav">
                <ul class="nav nav-pills">
                    <li class="nav-item">
                        <a class="nav-link {% if not selected_category %}active{% endif %}" href="{% url 'story:list' %}">全部</a>
                    </li>
                    {% for category in categories %}
                    <li class="nav-item">
                        <a class="nav-link {% if selected_category.id == category.id %}active{% endif %}" 
                           href="{% url 'story:list' %}?category={{ category.id }}">
                            {{ category.name }}
                        </a>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        <div class="col-md-4">
            <form method="get" action="{% url 'story:list' %}" class="d-flex">
                {% if selected_category %}
                <input type="hidden" name="category" value="{{ selected_category.id }}">
                {% endif %}
                <input type="text" name="q" class="form-control me-2" placeholder="搜索故事..." value="{{ search_query }}">
                <button type="submit" class="btn btn-primary">搜索</button>
            </form>
        </div>
    </div>
    
    {% if selected_category %}
    <div class="mb-3">
        <h3>{{ selected_category.name }}</h3>
        {% if selected_category.description %}
        <p class="text-muted">{{ selected_category.description }}</p>
        {% endif %}
    </div>
    {% endif %}
    
    {% if search_query %}
    <div class="alert alert-info">
        搜索结果: "{{ search_query }}" {% if selected_category %}在 {{ selected_category.name }} 分类中{% endif %}
        <a href="{% if selected_category %}{% url 'story:list' %}?category={{ selected_category.id }}{% else %}{% url 'story:list' %}{% endif %}" class="float-end">清除搜索</a>
    </div>
    {% endif %}
    
    {% if user.is_authenticated %}
    <div class="mb-4 d-flex justify-content-between">
        <a href="{% url 'story:create' %}" class="btn btn-primary">
            <i class="bi bi-plus-circle me-1"></i> 创建故事
        </a>
{#        <a href="{% url 'story:generate' %}" class="btn btn-success">#}
{#            <i class="bi bi-magic me-1"></i> AI生成故事#}
{#        </a>#}
    </div>
    {% endif %}
    
    {% if page_obj %}
    <div class="row row-cols-1 row-cols-md-3 g-4">
        {% for story in page_obj %}
        <div class="col">
            <div class="card h-100 shadow-sm">
                <div class="card-body">
                    <h5 class="card-title">
                        <a href="{% url 'story:detail' story.pk %}" class="text-decoration-none text-dark">
                            {{ story.title }}
                        </a>
                    </h5>
                    <h6 class="card-subtitle mb-2 text-muted">
                        {% if story.category %}
                        <span class="badge bg-primary">{{ story.get_category_display }}</span>
                        {% endif %}
                        <small>作者：{{ story.author.username }}</small>
                    </h6>
                    <p class="card-text text-truncate">{{ story.content|striptags }}</p>
                </div>
                <div class="card-footer bg-transparent d-flex justify-content-between">
                    <small class="text-muted">{{ story.created_at|date:"Y-m-d" }}</small>
                    <div>
                        <small class="text-muted me-2">
                            <i class="bi bi-eye"></i> {{ story.views }}
                        </small>
                        <small class="text-muted">
                            <i class="bi bi-heart"></i> {{ story.likes }}
                        </small>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    
    <!-- 分页 -->
    <nav class="mt-4">
        <ul class="pagination justify-content-center">
            {% if page_obj.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?page=1{% if selected_category %}&category={{ selected_category.id }}{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}">首页</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if selected_category %}&category={{ selected_category.id }}{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}">上一页</a>
            </li>
            {% endif %}
            
            <li class="page-item active">
                <span class="page-link">
                    {{ page_obj.number }} / {{ page_obj.paginator.num_pages }}
                </span>
            </li>
            
            {% if page_obj.has_next %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if selected_category %}&category={{ selected_category.id }}{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}">下一页</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if selected_category %}&category={{ selected_category.id }}{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}">末页</a>
            </li>
            {% endif %}
        </ul>
    </nav>
    {% else %}
    <div class="alert alert-info">
        {% if search_query %}
        没有找到匹配 "{{ search_query }}" 的故事
        {% else %}
        暂无故事
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %} 